<template>
  <div class="login_container">
    <div class="login_wrapper">
      <div class="login_wrapper_container">
        <div class="login_title">新用户注册</div>
        <div class="login_message">很高兴您将成为商城的会员（注册只需一步）</div>
        <!-- 两个输入框 -->
        <div class>
          <van-form @submit="onSubmit">
            <!-- 手机号输入框 -->
            <van-field
              class="van_username"
              v-model="phone"
              name="pattern"
              placeholder="手机号码"
              :rules="[{ required: true, message: '请填写正确的手机号码',pattern:/^1[3456789]\d{9}$/ }]"
            />
            <!-- 密码输入框 -->
            <van-field
              class="van_username"
              v-model="password"
              type="password"
              name="pattern"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写正确的密码' ,pattern:/^(?=.*[a-zA-Z])(?=.*[0-9])[A-Za-z0-9]{8,18}$/ }]"
            />
            <!-- 确认密码输入框 -->
            <van-field
              class="van_username"
              v-model="affirm"
              type="password"
              name="pattern"
              placeholder="确认密码"
              :rules="[{ required: true, message: '请填写正确的密码' ,pattern:/\S/ }]"
            />
            <!-- 用户名输入框 -->
            <van-field
              class="van_username"
              v-model="username"
              name="pattern"
              placeholder="用户名"
              :rules="[{ required: true, message: '请填写用户名' ,pattern:/\S/ }]"
            />
            <!-- 图片验证输入框 -->
            <div class="verify_img_container">
              <div class="verify_input">
                <van-field
                  class="van_username"
                  v-model="username"
                  name="pattern"
                  placeholder="验证码"
                  :rules="[{ required: true, message: '请输入验证码' ,pattern:/\S/ }]"
                />
              </div>
              <div class="verify_img" @click="replaceImg">
                <img src="https://api.it120.cc/small4/verification/pic/get" alt ref="verify_img"/>
              </div>
            </div>

            <!-- 地区输入框 -->
            <van-field
              class="van_username"
              readonly
              clickable
              name="area"
              :value="value"
              placeholder="点击选择省市区"
              @click="showArea = true"
            />
            <van-popup v-model="showArea" position="bottom">
              <van-area :area-list="areaList" @confirm="onConfirm" @cancel="showArea = false" />
            </van-popup>
            <!-- 获取验证码 -->
            <div class="verify_img_container">
              <div class="verify_input">
                <van-field
                  class="van_username"
                  v-model="username"
                  name="pattern"
                  placeholder="验证码"
                  :rules="[{ required: true, message: '请输入验证码' ,pattern:/\S/ }]"
                />
              </div>
              <div class="verify_num" @click="getVerify()">{{verify_text}}</div>
            </div>

            <div class="login_button_container">
              <van-button round block type="info" class="login_button" native-type="submit">立即注册</van-button>
            </div>
          </van-form>
          <!-- 功能操作 -->

          <div class="register_container">
            <span @click="toLogin()">已有账号？ 立即登录</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import City from '../utils/city'

export default {
  data() {
    return {
      showArea: false,
      areaList: City,
      value: "",
      phone: "",
      affirm: "",
      username: "",
      password: "",
      verify_text:"获取验证码",
      enable:true,
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
    },
    toLogin() {
      console.log(123123);
      this.$router.push("/login");
    },
    onConfirm(values) {
      this.value = values.map(item => item.name).join(" / ");
      this.showArea = false;
    },
    replaceImg(){
      // console.log(this.$refs.verify_img.src)
      this.$refs.verify_img.src = "https://api.it120.cc/small4/verification/pic/get"
    },
    getVerify(){
      if(!this.enable){
        return
      }

      this.enable = !this.enable
      var num = 60
      var countDown = window.setInterval(()=>{
        num--
        this.verify_text = `${num}秒后重试`
        if(num === 0){
          this.enable = !this.enable
          this.verify_text = '获取验证码'
          window.clearInterval(countDown)
        }
      },1000)
    }
  }
};
</script>

<style scoped>
.login_container {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: flex-start;
}
.login_wrapper {
  width: 90%;
  /* height: 11rem; */
  border: 0.05rem solid #f5f5f5;
  border-radius: 0.1rem;
  margin-top: 5%;
  display: inline-flex;
  justify-content: center;
  align-items: flex-start;
}
.login_wrapper_container {
  width: 80%;
  margin-top: 5%;
}
.login_title {
  width: 100%;
  height: 1.5rem;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 0.5rem;
}
.login_message {
  width: 100%;
  height: 0.8rem;
  color: gray;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 0.3rem;
}
.van_username {
  background-color: #f5f5f5;
  border-radius: 0.1rem;
  margin-top: 0.5rem;
  color: #757575;
}
.login_button_container {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.login_button {
  margin-top: 0.5rem;
  width: 4rem;
  border-radius: 0.2rem;
  height: 1rem;
  background: linear-gradient(135deg, #e570e7 0%, #79f1fc 100%);
  border: 0px;
  font-size: 0.3rem;
  font-weight: 700;
}
.forget_password span {
  width: 100%;
  margin-top: 0.5rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 0.18;
  color: gray;
}
.register_container span {
  width: 100%;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #549ff9;
  font-size: 0.3rem;
}
.verify_img_container {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.verify_input {
  width: 50%;
}
.verify_img {
  width: 50%;
  height: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.5rem;
}
.verify_img img {
  width: 100%;
}
.verify_num {
  width: 50%;
  height: 0.9rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.5rem;
  border-radius: 0.2rem;
  background-color: #f5f5f5;
}
</style>